<template>
  <div class="student-product">
    <template>
      <!-- 搜索框部分 -->
      <div class="search">
        <el-select
          v-model="searchValue"
          clearable
          filterable
          remote
          reserve-keyword
          placeholder="请输入姓名进行搜索"
          :remote-method="remoteMethod"
          :loading="loading"
          class="el-input_inner"
          @change="searchChange"
          @clear="clear"
        >
          <el-option
            v-for="item in searchList"
            :key="item.sId"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
        <el-button icon="el-icon-search" @click="searchButton"></el-button>
        <el-button type="primary" @click="addStuInfo" v-pin="'add'">添加项目</el-button>
      </div>
      <!-- 选择班级： -->
      <div class="chose_class">
        <el-form>
          <el-form-item label="选择班级：">
            <el-select
              v-model="classes"
              filterable
              placeholder="请选择"
              @visible-change="classVisible"
              @change="classChange"
            >
              <el-option label="全部" value="all"></el-option>
              <el-option
                :label="item"
                :value="item"
                v-for="(item, index) in classList"
                :key="index"
              ></el-option>
            </el-select>
            <!-- 导出exceal文件 -->
            <el-button
              size="medium"
              icon="iconfont icon-excel"
              class="excel_button"
              @click="export_excel"
            >
              导出excel文件</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="table">
        <el-table
          :data="stuTableData"
          border
          style="width: 100%"
          v-loading="loading"
        >
          <!-- v-loading表示的是加载动画 -->
          <el-table-column
            prop="headimgurl"
            label="头像"
            width="150"
            align="center"
          >
            <template slot-scope="scope">
              <el-avatar
                shape="square"
                :size="50"
                fit="fill"
                :src="scope.row.headimgurl"
              ></el-avatar>
              <!-- slot-scope="scope"获取当前行的数据，可以解构出当前插槽的数据 -->
              <!-- scope.row.headimgurl"表示的是，获取当前行的headimgurl数据 -->
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="100" align="center">
          </el-table-column>
          <el-table-column prop="class" label="班级" width="100" align="center">
          </el-table-column>
          <el-table-column
            prop="degree"
            label="学历"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="productUrl"
            label="项目"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="cTime" label="时间" align="center">
          </el-table-column>
          <el-table-column prop="address" label="操作" align="center">
            <template v-slot="{ row }">
              <el-button class="caoZuoButton" type="primary" icon="el-icon-view" v-pin="'read'" @click="checkStuInfo(row)"
                >查看</el-button
              >
              <el-button
                class="caoZuoButton"
                type="primary"
                icon="el-icon-edit"
                @click="editStuInfo(row)"
                v-pin="'edit'"
                >编辑</el-button
              >
              <el-button
                class="caoZuoButton"
                type="danger"
                icon="el-icon-delete"
                @click="deleteStu(row)"
                v-pin="'delete'"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页器 -->
      <div class="fenYe">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="stuPageSize"
          :total="stuTotalPage"
          @current-change="pageChange"
          :current-page.sync="currentPage"
        >
        </el-pagination>
      </div>
    </template>
    <!-- 展示dialog弹出框 -->
    <qfdialog></qfdialog>
  </div>
</template>
 

<script>
import * as api from "../../../api/index";
import qfdialog from "../../../components/dialog"; //引入dialog弹出框
import { mapActions, mapState, mapMutations } from "vuex"; //引入vuex文件
import qee from "qf-export-excel"; //引入导出excel的插件
export default {
  computed: {
    ...mapState([
      "stuTableData",
      "dialogTitle",
      "dialogVisible",
      "loading",
      "stuTotalPage",
      "stuPageSize",
    ]), //映射state中的学员数据
  },
  components: {
    //注册子组件
    qfdialog,
  },
  created() {
    // 调用获取学员信息的方法
    this.GET_STU_INFO();
    this.HIDE_LOADING();
  },
  data() {
    return {
      // squareUrl:stuTableData.headimgurl,//学员头像
      searchList: {}, //搜索学员的el-option的数据
      searchValue: "", //搜索学员的v-model绑定的值
      list: [],
      // loading: true, //加载动画

      classes: "", //绑定的班级
      classList: [], //班级列表
      value: "",
      currentPage: 1, //定义当前页码
    };
  },

  methods: {
    ...mapMutations(["SET_STU_DATA"]),
    ...mapActions(["GET_STU_INFO"]), //映射获取学员信息的数据
    // 点击查看按钮进行的操作
    checkStuInfo(row){
      localStorage.setItem('stuProfile',JSON.stringify(row))
      //跳转页面到学员资料页
      this.$router.push({ path: '/studentManger/studentProfile'})
      // console.log(row);//打印的是当前行的所有信息
    },
    //导出excel文件
    export_excel() {
      let titleList = [
        {
          title: "头像地址",
          key: "headimgurl",
        },
        {
          title: "姓名",
          key: "name",
        },
        {
          title: "班级",
          key: "class",
        },
        {
          title: "学历",
          key: "degree",
        },
        {
          title: "项目",
          key: "productUrl",
        },
        {
          title: "时间",
          key: "cTime",
        },
      ];
      qee(titleList,this.stuTableData,"2104班级信息")
    },
    //搜索框内容清空的方法
    clear() {
      this.currentPage = 1;
    },
    // 点击搜索按钮的方法
    searchButton() {
      // console.log(this.searchValue);
      api.searchStuList(null, this.searchValue, null).then((res) => {
        // console.log(res.data.data);
        // 从vuex中获取控制学员表格数据的方法,更新表格
        this.SET_STU_DATA(res.data);
      });
    },
    //监控获取学员名字的搜索框内容的方法
    remoteMethod(query) {
      // console.log(query); //打印的是我们在搜索框输入的内容
      this.searchValue = query;
      api.searchStuList(null, query, null).then((res) => {
        // console.log(res); //打印的是我们传入的query对应的值
        //数组去重，目的是实现班级分类
        let norepeat = [];
        for (let i = 0; i < res.data.data.length; i++) {
          let flag = true;
          for (let j = 0; j < norepeat.length; j++) {
            if (norepeat[j].name === res.data.data.name) {
              falg = false; //如果norepeat中存在res中的name,则中断
              break;
            }
          }
          if (flag) {
            //将满足条件的元素推到数组norepeat中
            norepeat.push(res.data.data[i]);
          }
        }
        this.searchList = norepeat;
      });
    },

    // 搜索框文本发生变化的事件
    searchChange(searchText) {
      // console.log(searchText);//打印的是我们搜索后点击的元素
      // 实现精准搜索
      api.searchStuList(null, searchText, null).then((res) => {
        // this.currentPage = 1;
        // console.log(res,5555);
        // 从vuex中获取控制学员表格数据的方法,更新表格
        this.SET_STU_DATA(res.data);
      });
    },
    // 点击页码触发页面更新
    pageChange(page) {
      // console.log(this.searchValue);
      // console.log(page); //打印的是页码数
      // 为了实现将搜索的内容也进行分页，我们要判断searchValue 中的内容
      if (this.searchValue) {
        api.searchStuList(page, this.searchValue, null).then((res) => {
          // console.log(res);
          this.SET_STU_DATA(res.data);
        });
      } else {
        // 因为我们获取学员信息可以传递page这个参数，所以我们要再次调用
        this.GET_STU_INFO({ page: page });
        this.HIDE_LOADING();
      }
    },
    //点击选择班级的搜索框选中时触发的方法
    classChange(query) {
      // console.log(query); //打印的结果是el-option中的value的值
      //1.select展开的时候需要展示所有的班级列表
      //2.选中班级列表的时候,要更新表格
      //因为我们之前在vuex中存了获取学员信息的方法，所以此时我们只需要调用并且传递班级这个参数
      if (query === "all") {
        //当点击全部的时候
        query = ""; //让query为空  ，因为后台逻辑就是当为空的时候，会返回全部数据
      }
      this.GET_STU_INFO({ classes: query });
      this.HIDE_LOADING();
    },
    //点击搜索框触发的方法，它有两种结果 true  和 false
    classVisible(isVisible) {
      if (isVisible) {
        //表示如果是true
        api.getClassListInfo().then((res) => {
          // console.log(res);//打印的结果中就有我们能用到的班级列表
          this.classList = res.data.data;
        });
      }
    },

    ...mapMutations([
      "SHOW_DIALOG",
      "HIDE_DIALOG",
      "CHANGE_DIALOG_TITLE",
      "SHOW_LOADING",
      "HIDE_LOADING",
      "SET_CURRENT_ROW",
    ]),

    //点击添加学员信息的操作
    addStuInfo() {
      // 添加的时候让dialog弹出来，并且dialog的标题为 增加学员信息
      this.CHANGE_DIALOG_TITLE("增加学员信息");
      this.SHOW_DIALOG();
    },

    //点击编辑学员信息的操作
    editStuInfo(row) {
      // 编辑的时候让dialog弹出来，并且dialog的标题为 编辑学员信息
      this.CHANGE_DIALOG_TITLE("编辑学员信息");
      this.SHOW_DIALOG();
      // console.log(row); //打印到的结果是当前这一行的元素的信息
      //让数据进行回显，那么我们就要将row,传到vuex中,然后再dialog中获取我们传入的数据
      this.SET_CURRENT_ROW(row);
    },
    //删除学员信息的操作
    deleteStu(row) {
      // console.log(row.sId); //打印的结果就是该行数据的sID
      //调用删除学员数据的接口
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api.delStuInfo(row.sId).then((res) => {
            // console.log(res);
            if (res.data.state) {
              //如果删除成功
              this.GET_STU_INFO(); //刷新学员信息
              this.HIDE_LOADING(); //关闭表格加载动画
            } else {
              this.$message.error("数据已被删除");
            }
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped lang='less'>
.search {
  line-height: 60px;
  text-align: left;
  margin: 20px 0;
  & .el-input_inner {
    padding-right: 5px;
    width: 300px;
  }
}
.chose_class {
  text-align: left;
}
.fenYe {
  // vertical-align: baseline;
  padding-top: 30px;
}
.caoZuoButton {
  width: 65px;
  height: 25px;
  padding: 0;
}
.el-avatar {
  width: 50px;
  height: 50px;
}
/deep/ .excel_button {
  margin-left: 633px;
  text-align: right !important;
  font-size: 15px;
  
}
</style>
 